<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordion menu</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/accordion.css">
    <script src="js/accordion.js"></script>
    <style>
        .box{padding:30px;}
        table{margin:20px;min-width:650px;border-collapse: separate;border-spacing: 4px;}
        caption{text-align:center;font-weight:bold;}
        table td:nth-child(2n+1){width:85px;}
        table td:nth-child(2n){width:70px;}
        #menu{width:200px;}
    </style>
</head>
<body>
<div  class="box">
    <table>
        <caption>Accordion Memu</caption>
        <tr>
            <td>开始颜色：</td>
            <td>
                <input type="color" value="#18626b" class="form-control" id="start" />
            </td>
            <td>结束颜色：</td>
            <td>
                <input type="color" value="#2fb9ca" class="form-control" id="end" />
            </td>
            <td style="width:100px">颜色递变步数：</td>
            <td>
                <input type="number" value="4" class="form-control" id="colorCount" />
            </td>
            <td>排序方式：</td>
            <td style="width:100px">
                <label>
                    <input type="radio" value="asc" checked name="orderby" class="orderby" />升序
                </label>
                &nbsp;&nbsp;
                <label>
                    <input type="radio" value="desc" name="orderby" class="orderby" />降序
                </label>
            </td>
        </tr>
        <tr>
            <td>显示图标：</td>
            <td style="width:30px">
                <input type="checkbox" checked value="MenuIcon" id="icon" />
            </td>
            <td>层级缩进值：</td>
            <td>
                <input type="number" value="1" step="0.1" min="0" class="form-control" id="indent" />
            </td>
            <td>收展速度：</td>
            <td>
                <input type="number" value="300" min="0" class="form-control" id="speed" />
            </td>
            <td colspan="2">
                <button class="btn btn-primary form-control" onclick="setMenu()">应用</button>
            </td>
        </tr>
    </table>
    <div id="menu"></div>
</div>
</body>

</body>
</html>
<script>
    var json=[
        {
            "Id": 9,
            "MenuName": "企业讯息",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-th-large",
            "ParentId": 0,
            "Seq": 1
        },
        {
            "Id": 1,
            "MenuName": "应用资讯",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-th-list",
            "ParentId": 0,
            "Seq": 2
        },
        {
            "Id": 6,
            "MenuName": "企业网站",
            "MenuUrl": "/Website/Addr",
            "MenuIcon": "glyphicon glyphicon-stats",
            "Seq": 2,
            "ParentId": null
        },
        {
            "Id": 11,
            "MenuName": "专业资讯",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-book",
            "ParentId": 0,
            "Seq": 3
        },
        {
            "Id": 4,
            "MenuName": "智趣生活",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-cutlery",
            "ParentId": 0,
            "Seq": 4
        },
        {
            "Id": 5,
            "MenuName": "ERP系统",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-cog",
            "Seq": 1,
            "ParentId": 1
        },
        {
            "Id": 7,
            "MenuName": "通讯录",
            "MenuUrl": "/AddrBook/Index",
            "MenuIcon": "glyphicon glyphicon-book",
            "Seq": 3,
            "ParentId": 1
        },
        {
            "Id": 69,
            "MenuName": "监控系统",
            "MenuUrl": "/Website/Index",
            "MenuIcon": "glyphicon glyphicon-camera",
            "Seq": 4,
            "ParentId": 1
        },
        {
            "Id": 20,
            "MenuName": "公司活動",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-tree-conifer",
            "Seq": 1,
            "ParentId": 4
        },
        {
            "Id": 21,
            "MenuName": "員工天地",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-user",
            "Seq": 2,
            "ParentId": 4
        },
        {
            "Id": 22,
            "MenuName": "健康專欄",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-apple",
            "Seq": 3,
            "ParentId": 4
        },
        {
            "Id": 23,
            "MenuName": "生活碎事",
            "MenuUrl": "/EC/Index",
            "MenuIcon": "glyphicon glyphicon-list-alt",
            "Seq": 4,
            "ParentId": 4
        },
        {
            "Id": 65,
            "MenuName": "公司简介",
            "MenuUrl": "/Base/Home/ViewCompany",
            "MenuIcon": "glyphicon glyphicon-home",
            "Seq": 1,
            "ParentId": 9
        },
        {
            "Id": 66,
            "MenuName": "企业文化",
            "MenuUrl": "/Base/Com/Culture",
            "MenuIcon": "glyphicon glyphicon-flag",
            "Seq": 3,
            "ParentId": 9
        },
        {
            "Id": 67,
            "MenuName": "拓展愿景",
            "MenuUrl": "/Base/Com/Vision",
            "MenuIcon": "glyphicon glyphicon-globe",
            "Seq": 5,
            "ParentId": 9
        },
        {
            "Id": 43,
            "MenuName": "质量认证",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-record",
            "Seq": 1,
            "ParentId": 11
        },
        {
            "Id": 49,
            "MenuName": "质量管理辅具",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-oil",
            "Seq": 2,
            "ParentId": 11
        },
        {
            "Id": 60,
            "MenuName": "食品级认证",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-piggy-bank",
            "Seq": 4,
            "ParentId": 11
        },
        {
            "Id": 78,
            "MenuName": "案例",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-comment",
            "Seq": 6,
            "ParentId": 40
        },
        {
            "Id": 39,
            "MenuName": "ISO9001",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-refresh",
            "Seq": 1,
            "ParentId": 43
        },
        {
            "Id": 40,
            "MenuName": "TS16949",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-refresh",
            "Seq": 2,
            "ParentId": 43
        },
        {
            "Id": 50,
            "MenuName": "5M1E",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-option-horizontal",
            "Seq": 1,
            "ParentId": 49
        },
        {
            "Id": 52,
            "MenuName": "5W3H",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-option-vertical",
            "Seq": 2,
            "ParentId": 49
        },
        {
            "Id": 55,
            "MenuName": "六西格玛",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-knight",
            "Seq": 3,
            "ParentId": 49
        },
        {
            "Id": 54,
            "MenuName": "7M1E",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-baby-formula",
            "Seq": 4,
            "ParentId": 49
        },
        {
            "Id": 53,
            "MenuName": "7S",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-queen",
            "Seq": 5,
            "ParentId": 49
        },
        {
            "Id": 51,
            "MenuName": "8D报告",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-list-alt",
            "Seq": 6,
            "ParentId": 49
        },
        {
            "Id": 56,
            "MenuName": "PDCA",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-tower",
            "Seq": 7,
            "ParentId": 49
        },
        {
            "Id": 71,
            "MenuName": "lfgb",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-info-sign",
            "Seq": 0,
            "ParentId": 60
        },
        {
            "Id": 61,
            "MenuName": "FDA (USA)",
            "MenuUrl": null,
            "MenuIcon": "glyphicon glyphicon-piggy-bank",
            "Seq": 1,
            "ParentId": 60
        }
    ];
    var opts = {
        idField: 'Id',//字段名
        parentField: 'ParentId',//父节点字段名
        nameField: 'MenuName',//节点显示文本
        iconField:'MenuIcon',//节点图标字段，如字体图标类
        sortName:'Seq',//节点排序的字段名称
        sortOrder:'asc',//节点排序方式asc/desc
        childrenField: 'children',//子节点字段名
        url: '',//url加载数据初始化菜单。优先以传参data数组数据初始化菜单,若不传参则以url方式加载初始化
        ajaxType:'',//请求类型，默认get
        ajaxData:'',//请求参数数据
        asTreeData:false,//菜单数组数据是否以树状数组展示
        data: json,//初始化菜单的数据,url和data共存时优先使用data
        indentStep:1,//菜单层级缩进数值(单位em)
        startColor:'#18626b',//菜单开始背景色(HEX十六进制颜色码)
        endColor:'#2fb9ca',//菜单最终背景色(HEX十六进制颜色码)
        colorCount:'4',//开始至结束每层级菜单背景色过渡段数
        speed:300,//展开滑动速度。菜单完成滑动展开/收缩所用时间(ms)
        onnodeclick: clickFn,//菜单节点点击fn(node,sender,ele,e)
        onnodemouseenter:enterFn,//鼠标进入节点fn(node,sender,ele,e)
        onnodemouseleave:leaveFn,//鼠标离开节点fn(node,sender,ele,e)
        onmenuready:renderFn//菜单加载渲染完后fn(sender)
    };
    var menu=new Accordion("#menu",opts);
    function clickFn(node,sender,ele,e){
        console.log(node)
        console.log(sender)
        console.log(ele)
        console.log(e)
    }
    function enterFn(node,sender,ele,e){
        //console.log('enter')
    }
    function leaveFn(node,sender,ele,e){
        //console.log('leave')
    }
    function renderFn(sender){
        console.log(sender)
    }
    function setMenu() {
        var o = {
            iconField:document.querySelector("#icon").checked?document.querySelector("#icon").value:"",
            startColor:document.querySelector('#start').value,
            endColor: document.querySelector('#end').value,
            colorCount:document.querySelector('#colorCount').value||4,
            indentStep: document.querySelector('#indent').value,
            speed: document.querySelector('#speed').value,
            sortOrder:document.querySelector('.orderby:checked').value

        }
        menu.init(o);
    }

</script>